<template>
  <el-table ref="tableRef" row-key="id" :data="TableData" style="width: 100%">
    <el-table-column prop="id" label="ID" width="380" />
    <el-table-column
      prop="logMessage"
      :label="$t('pageSystemLogs.table.logMessage')"
      width="380"
    />
    <el-table-column :label="Operations">
      <template #default="scope">
        <el-button
          class="bg-[var(--el-color-primary)]"
          type="primary"
          size="small"
          @click="downloadLog(scope.row.dataType, scope.row.logMessage)"
          >{{ $t('global.action.download') }}</el-button
        >
      </template>
    </el-table-column>
  </el-table>

  <div class="demo-pagination-block mt-8">
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="perPage"
      :page-sizes="[10, 20, 30, 40]"
      :small="false"
      :disabled="false"
      :background="true"
      layout="sizes, prev, pager, next"
      :total="allLogs.length"
    />
  </div>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n';
import { useSystemLogStore } from '@/store/Diagnostic/SystemLogs/SystemLogsStore';

const systemLogStore = useSystemLogStore();

const i18n = useI18n();
const Operations = computed(() => i18n.t('pageSystemLogs.table.operation'));
const allLogs = computed(() => [
  {
    id: 0,
    logMessage: i18n.t('pageSystemLogs.logMessage.HostSerialPortLogs'),
    dataType: 'Console',
  },
  {
    id: 1,
    logMessage: i18n.t('pageSystemLogs.logMessage.HostFailureInformation'),
    dataType: 'PcieNic',
  },
]);

const TableData = computed(() => {
  const firstIndex = (currentPage.value - 1) * perPage.value;
  const lastIndex = currentPage.value * perPage.value;
  return allLogs.value.slice(firstIndex, lastIndex);
});

const perPage = ref(10);
const currentPage = ref(1);

const downloadLog = (dataType: string, fileName: string) => {
  systemLogStore
    .download({ dataType, fileName })
    .then((message: any) => {
      ElNotification({
        title: 'Success',
        message,
        type: 'success',
      });
    })
    .catch((message: any) => {
      ElNotification({
        title: 'Error',
        message,
        type: 'error',
      });
    });
};
</script>

<style lang="scss" scoped></style>
